<template>
  <view class="transaction-status" :style="{backgroundColor:statu.color}">
    <view class="status-top">
      <up-icon :name="statu.icon" color="#fff"></up-icon>
      <view class="status-text">{{statu.text}}</view>
    </view>
    <view class="status-label">{{statu.label}}2024-08-30 09:42</view>
  </view>
  <DeliveryAddress :address="addressList"></DeliveryAddress>
  <view class="transaction-nav">
    <CommodityNav :src="commodity.url" :title="commodity.title" :number="commodity.number" :price="commodity.price"
      :name="commodity.name"></CommodityNav>
  </view>
  <view class="transaction-info">
    <view class="info-number">
      <view class="info-title">订单编号</view>
      <view class="info-nav">13214
        <image src="@/static/icon/user/copy.png" mode=""></image>
      </view>
    </view>
    <view class="info-timer">
      <view class="">下单时间</view>
      <view class="info-nav">2024-08-27 09:42</view>
    </view>
    <view class="info-freight">
      <view class="">运费</view>
      <view class="info-price">￥0</view>
    </view>
    <view class="info-Disbursements" v-if="statu.type === 2">
      <view class="">实付款</view>
      <view class="info-price">￥199</view>
    </view>
  </view>
  <view class="transaction-btn">
    <view class="btn btn-cancel" v-if="statu.type === 1">取消订单</view>
    <view class="btn btn-pay" v-if="statu.type === 1">立即付款</view>
    <view class="btn btn-again" v-if="statu.type === 2">再来一单</view>
  </view>
</template>

<script setup>
  import {
    reactive
  } from 'vue'
  import {
    onLoad
  } from "@dcloudio/uni-app"
  import DeliveryAddress from './components/Delivery-Address.vue'
  import CommodityNav from './components/Commodity-Nav.vue'
  const statuses = reactive([{
    type: 1,
    name: "等待付款中",
    icon: "clock",
    text: "订单待付款",
    label: "截止支付时间：",
    color: "#1a1a1a"
  }, {
    type: 2,
    name: "交易成功",
    icon: "checkmark-circle",
    text: "交易成功",
    label: "交易完成时间：",
    color: "#009A29"
  }])
  const addressList = reactive({
    name: 'XXX',
    phone: '13201231111',
    site: "江西省上饶市信州区恒大名都花园11栋2单元601"
  })
  const commodity = reactive({
    url: "https://img.js.design/assets/img/66c4605be6fc3110ca4c89f5.png#77b4d311506bb9a28f8b84cd3a9c9f5f",
    title: "作品文案作品文案作品文案作品文案作品文案作品文案作品文案作品",
    number: 10,
    price: 20,
    name: "连衣裙"
  })
  let statu = reactive({})
  onLoad((e) => {
    if (e && e.type) {
      statu = statuses.find(item => {
        return item.type == e.type
      });
      if (statu) {
        uni.setNavigationBarTitle({
          title: statu.name
        })
      }
    }
  })
</script>

<style lang="less" scoped>
  .transaction-status {
    width: 100%;
    height: 188rpx;
    opacity: 1;
    font-size: 32rpx;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .status-top {
      display: flex;
      align-items: center;

      .status-text {
        margin-left: 12rpx;
      }
    }

    .status-label {
      margin-top: 12 rpx;
    }
  }

  .transaction-nav {
    background-color: #fff;
    margin-top: 24rpx;
    box-sizing: border-box;
    padding: 32rpx;
  }

  .transaction-info {
    width: 100%;
    background: #FFFFFF;
    margin-top: 24rpx;
    box-sizing: border-box;
    padding: 8rpx 32rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);

    .info-number,
    .info-timer,
    .info-freight,
    .info-Disbursements {
      height: 66rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .info-nav {
        display: flex;
        align-items: center;
        color: rgba(102, 102, 102, 1);

        image {
          height: 28rpx;
          width: 28rpx;
          margin-left: 16rpx;
        }
      }

      .info-price {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);

      }
    }
  }

  .transaction-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 0 20rpx;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45vw;
      height: 80rpx;
      border-radius: 200rpx;
      font-size: 28rpx;
      font-weight: 400;
      margin: 0 12rpx;
    }

    .btn-cancel,
    .btn-again {
      background: #FFFFFF;
      border: 4rpx solid #F2F2F2;
      color: rgba(51, 51, 51, 1);

    }

    .btn-pay {
      background: #FF416C;
      color: rgba(255, 255, 255, 1);

    }
  }
</style>